<template>
  <!--<div>permissList</div> -->
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="180" align="center">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        align="center"
      >
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="updateSize"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageOptions.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rows"
    >
    </el-pagination>
  </div>
</template>

<script>
import { userList } from "@/apis/user.js";
export default {
  data() {
    return {
      //分页器参数
      pageOptions: {
        pageNo: 1,
        pageSize: 10,
      },
      //数据总条数
      rows: 0,
      //表单内容
      tableData: [],
      //第一列配置内容
      columns: [
        {
          label: "用户名",
          prop: "account",
        },
        {
          label: "密码",
          prop: "password",
        },
        {
          label: "创建时间",
          prop: "reg_time",
        },
        {
          label: "创建者",
          prop: "creator",
        },
        {
          label: "权限分配",
          prop: "role_name",
        },
      ],
    };
  },
  methods: {
    //改变分页的方法 该方法可以获取点击的页数参数
    handleCurrentChange(pageNo){
         this.pageOptions.pageNo=pageNo
         this.getUserList()
    },
    //改变每页多少条  
    updateSize(pageSize){
        this.pageOptions.pageSize=pageSize
        this.getUserList()
    },
    //获取数据
    async getUserList() {
      //获取表单数据
      let res = await userList();
      if (res.data.code === 20000) {
        //解构分页器参数
        let { pageNo, pageSize } = this.pageOptions;
        //定义一个新对象用于获取分页器数据
        let newTable=res.data.data
        //根据分页参数展示不同数据
        newTable=newTable.slice(
          (pageNo-1)*pageSize,pageNo*pageSize
        )
        this.newTable = newTable.map((item) => {
          item.reg_time = this.getTime(item.reg_time);
          item.role_name = this.getRole(item.role_name);
          return item;
        });
        this.rows=res.data.data.length
        this.tableData = newTable;
      }
    },
    //时间格式化方法
    getTime(date) {
      function convertTime(n) {
        return n < 10 ? "0" + n : n;
      }
      let d2 = new Date(date);
      return (
        d2.getFullYear() +
        "-" +
        convertTime(d2.getMonth() + 1) +
        "-" +
        convertTime(d2.getDate()) +
        " " +
        convertTime(d2.getHours()) +
        ":" +
        convertTime(d2.getSeconds()) +
        ":" +
        convertTime(d2.getMinutes())
      );
    },
    //角色格式化方法
    getRole(s) {
      switch (s) {
        case "input":
          return "销售专员";
        case "approve":
          return "初审专员";
        case "administrator":
          return "超级管理员";
      }
    },
  },
  mounted() {
    this.getUserList();
  },
};
</script>

<style>
</style>